<template>
    <div :class="{ 'hidden': hidden }" class="pagination-container">
        <a-pagination v-model:current="currentPage" v-model:page-size="pageSize" show-quick-jumper :total="total"
            @showSizeChange="handleSizeChange" @change="handleCurrentChange"  :show-total="total => `共 ${total} 条`" />
    </div>
</template>
  
<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';

const props = defineProps({
    total: {
        required: true,
        default: 0,
        type: Number
    },
    page: {
        type: Number,
        default: 1
    },
    limit: {
        type: Number,
        default: 10
    },
    hidden: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits();
const currentPage = computed({
    get() {
        return props.page
    },
    set(val) {
        emit('update:page', val)
    }
})
const pageSize = computed({
    get() {
        return props.limit
    },
    set(val) {
        emit('update:limit', val)
    }
})
function handleSizeChange(val) {
    
    if (currentPage.value * val > props.total) {
        currentPage.value = 1
    }
    emit('pagination', { page: currentPage.value, limit: val })
}
function handleCurrentChange(val) {
    emit('pagination', { page: val, limit: pageSize.value })
}

</script>
  
<style scoped>
.pagination-container {
    background: #fff;
    text-align: right;
    padding: 12px 0;
}

.pagination-container.hidden {
    display: none;
}
</style>